import React, { useState } from "react";
import "./index.less";
/**
 * Index 组件是一个 React 函数组件，用于渲染头部内容。
 * 
 * @returns {JSX.Element} 返回一个包含头部样式的 JSX 元素。
 */
export default function Index() {
  // 使用 useState 钩子来管理宽度状态，初始宽度为 "30%"
  const [width] = useState("30%");
  return (
    // 渲染一个带有 main_header 类名的 div 元素作为主头部容器
    <div className="main_header">
      {/* 渲染一个带有 innerBox 类名的 div 元素，通过 CSS 变量设置其宽度 */}
      <div className="innerBox" style={{ "--width": width }}></div>
    </div>
  );
}
